<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 600px;
            height: 800px;
            margin: 50px auto;
            border: 1px solid #000;
            position: relative;
        }
        .c{
            position: absolute;
            left: 319px;
            top: 84px;
            width: 109px;
            height: 139px;
            background: url("../images/c.png") no-repeat;
            animation:c 2s;
        }
        .s1{
            position: absolute;
            left: 408px;
            top: 118px;
            width: 98px;
            height: 124px;
            background: url("../images/s1.png") no-repeat;
            animation:s1 2s;
        }
        .s2{
            position: absolute;
            left: 487px;
            top: 147px;
            width: 83px;
            height: 112px;
            background: url("../images/s.png") no-repeat;
            animation:s2 2s;
        }
        .h{
            position: absolute;
            left: 311px;
            top: 175px;
            width: 112px;
            height: 127px;
            background: url("../images/H.png") no-repeat;
            animation:h 2s;
        }
        .t{
            position: absolute;
            left: 388px;
            top: 199px;
            width: 100px;
            height: 112px;
            background: url("../images/T.png") no-repeat;
            animation:t 2s;
        }
        .m{
            position: absolute;
            left: 442px;
            top: 218px;
            width: 114px;
            height: 107px;
            background: url("../images/M2.png") no-repeat;
            animation:m 2s;
        }
        .l{
            position: absolute;
            left: 516px;
            top: 239px;
            width: 82px;
            height: 94px;
            background: url("../images/L.png") no-repeat;
            animation:l 2s;
        }
        @keyframes c
        {
            0%{
                left: 44px;
                top: -155px;
            }
            40%{
                left: 319px;
                top: -55px;
            }
            100%{
                top: 84px;
            }
        }
        @keyframes s1
        {
            0%{
                left: 170px;
                top: 86px;
            }
            40%{
                left: 408px;
                top: -21px;
            }
            100%{
                top: 118px;
            }
        }
        @keyframes s2
        {
            0%{
                left: 675px;
                top: 72px;
            }
            40%{
                left: 487px;
                top: 8px;
            }
            100%{
                top: 147px;
            }
        }
        @keyframes h
        {
            0%{
                left: 56px;
                top: 132px;
            }
            100%{
                top: 175px;
            }
        }
        @keyframes t
        {
            0%{
                left: 129px;
                top: 289px;
            }
            100%{
                left: 388px;
                top: 199px;
            }
        }
        @keyframes m
        {
            0%{
                left: 713px;
                top: 142px;
            }
            100%{
                left: 442px;
                top: 218px;
            }
        }
        @keyframes l
        {
            0%{
                left: 676px;
                top: 275px;
            }
            100%{
                left: 516px;
                top: 239px;
            }
        }
    </style>
</head>
<body>
<div class="box">
    <div class="s2"></div>
    <div class="s1"></div>
    <div class="c"></div>
    <div class="l"></div>
    <div class="m"></div>
    <div class="t"></div>
    <div class="h"></div>
</div>
</body>
</html>